<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-message-show
  *ngIf="app != undefined"
  [help_message_content]="'monitor.app.' + app + '.help' | i18n"
  [guild_link]="'monitor.app.' + app + '.helpLink' | i18n"
  [icon_name]="getAppIconName(app)"
></app-help-message-show>
<app-help-message-show
  *ngIf="app == undefined"
  [help_message_content]="'monitors.center.help' | i18n"
  [guild_link]="'monitors.center.help.link' | i18n"
  [module_name]="'menu.monitor.center'"
  [icon_name]="'laptop'"
></app-help-message-show>

<nz-divider></nz-divider>

<app-toolbar>
  <ng-template #left>
    <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
      <i nz-icon nzType="sync" nzTheme="outline"></i>
    </button>
    <button *ngIf="isDefaultListMenu || app == undefined" nz-button nzType="primary" (click)="onAppSwitchModalOpen()">
      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
      {{ 'monitors.new-monitor' | i18n }}
    </button>
    <button *ngIf="app != undefined" nz-button nzType="primary">
      <a routerLink="/monitors/new" [queryParams]="{ app: app }">
        <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
        {{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
      </a>
    </button>
    <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
      <span nz-icon nzType="ellipsis"></span>
    </button>
    <nz-dropdown-menu #more_menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>
          <button nz-button nzType="primary" (click)="onEnableManageMonitors()" class="mobile-hide">
            <i nz-icon nzType="play-circle" nzTheme="outline"></i>
            {{ 'monitors.enable' | i18n }}
          </button>
        </li>
        <li nz-menu-item>
          <button nz-button nzType="primary" nzDanger (click)="onCancelManageMonitors()" class="mobile-hide">
            <i nz-icon nzType="pause-circle" nzTheme="outline"></i>
            {{ 'monitors.cancel' | i18n }}
          </button>
        </li>
        <li nz-menu-item>
          <button nz-button nzType="primary" nzDanger (click)="onDeleteMonitors()">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
            {{ 'monitors.delete-monitor' | i18n }}
          </button>
        </li>
        <li nz-menu-item>
          <button nz-button nzType="primary" (click)="onExportMonitors()">
            <i nz-icon nzType="export" nzTheme="outline"></i>
            {{ 'monitors.export' | i18n }}
          </button>
        </li>
        <li nz-menu-item>
          <nz-upload nzAction="/monitors/import" [nzLimit]="1" [nzShowUploadList]="false" (nzChange)="onImportMonitors($event)">
            <button nz-button nzType="primary">
              <i nz-icon nzType="import" nzTheme="outline"></i>
              {{ 'monitors.import' | i18n }}
            </button>
          </nz-upload>
        </li>
      </ul>
    </nz-dropdown-menu>
  </ng-template>
  <ng-template #right>
    <nz-select
      class="mobile-hide"
      nzAllowClear
      [nzPlaceHolder]="'monitor.status' | i18n"
      [(ngModel)]="filterStatus"
      (ngModelChange)="onFilterSearchMonitors()"
    >
      <nz-option [nzLabel]="'monitor.status.all' | i18n" [nzValue]="9"></nz-option>
      <nz-option [nzLabel]="'monitor.status.up' | i18n" [nzValue]="1"></nz-option>
      <nz-option [nzLabel]="'monitor.status.down' | i18n" [nzValue]="2"></nz-option>
      <nz-option [nzLabel]="'monitor.status.paused' | i18n" [nzValue]="0"></nz-option>
    </nz-select>
    <app-multi-func-input
      *ngIf="isDefaultListMenu"
      groupStyle="width: 120px;"
      class="mobile-hide"
      [readonly]="true"
      [placeholder]="'monitors.search.app' | i18n"
      [(value)]="app"
      (click)="onSearchAppClicked()"
      (valueChange)="onAppChanged()"
    />
    <app-multi-func-input
      groupStyle="width: 120px;"
      class="mobile-hide"
      [placeholder]="'monitors.search.tag' | i18n"
      [(value)]="tag"
      (valueChange)="onTagChanged()"
    />
    <app-multi-func-input
      groupStyle="width: 180px;"
      class="mobile-hide"
      [placeholder]="'monitors.search.placeholder' | i18n"
      [(value)]="filterContent"
      (valueChange)="onFilterSearchMonitors()"
    />
  </ng-template>
</app-toolbar>

<nz-table
  #fixedTable
  [nzData]="monitors"
  [nzPageIndex]="pageIndex"
  [nzPageSize]="pageSize"
  [nzTotal]="total"
  nzFrontPagination="false"
  [nzLoading]="tableLoading"
  nzShowSizeChanger
  [nzShowTotal]="rangeTemplate"
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
  [nzScroll]="{ x: '1240px' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzWidth="20%" nzColumnKey="name" [nzSortFn]="true">{{ 'monitor.name' | i18n }}</th>
      <th nzAlign="center" nzWidth="10%" nzColumnKey="status" [nzSortFn]="true">{{ 'monitor.status' | i18n }}</th>
      <th nzAlign="center" nzWidth="12%">{{ 'monitor.host' | i18n }}</th>
      <th nzAlign="center" nzWidth="10%">{{ 'monitor.app' | i18n }}</th>
      <th nzAlign="center" nzWidth="21%">{{ 'tag' | i18n }}</th>
      <th nzAlign="center" nzWidth="14%" nzColumnKey="gmtUpdate" [nzSortFn]="true">{{ 'common.edit-time' | i18n }}</th>
      <th nzAlign="center" nzWidth="10%">{{ 'common.edit' | i18n }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td nzAlign="center">
        <button nz-button nzSize="default" nzType="link" [routerLink]="['/monitors/' + data.id]">
          {{ data.name }}
          <span nz-icon nzType="area-chart"></span>
        </button>
      </td>
      <td nzAlign="center">
        <nz-tag *ngIf="data.status == 0" [nzColor]="'#b2b2b2'">
          <i nz-icon nzType="meh" nzTheme="outline"></i>
          <span>{{ 'monitor.status.paused' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 1" [nzColor]="'#498765'">
          <i nz-icon nzType="smile" nzTheme="outline"></i>
          <span>{{ 'monitor.status.up' | i18n }}</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 2" [nzColor]="'#fd4357'">
          <i nz-icon nzType="frown" nzTheme="outline"></i>
          <span>{{ 'monitor.status.down' | i18n }}</span>
        </nz-tag>
      </td>
      <td nzAlign="center">
        <button
          nz-button
          nzSize="default"
          nzType="text"
          [cdkCopyToClipboard]="data.host"
          nz-tooltip
          [nzTooltipTitle]="'common.copy' | i18n"
          (click)="notifyCopySuccess()"
        >
          {{ data.host }}
          <span nz-icon nzType="copy"></span>
        </button>
      </td>
      <td nzAlign="center">
        <a routerLink="/monitors" [queryParams]="{ app: data.app }">
          <nz-tag nzColor="processing" class="hoverClass">
            <i nz-icon nzType="cloud"></i>
            <span>{{ 'monitor.app.' + data.app | i18n }}</span>
          </nz-tag>
        </a>
      </td>
      <td nzAlign="left">
        <a *ngFor="let tag of data?.tags; let i = index" routerLink="/monitors" [queryParams]="{ tag: sliceTagName(tag) }">
          <nz-tag style="margin-top: 2px" [nzColor]="tag?.color" class="hoverClass">
            {{ sliceTagName(tag) }}
          </nz-tag>
        </a>
      </td>
      <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
      <td nzAlign="center">
        <div class="actions">
          <button nz-button nzType="primary" [routerLink]="['/monitors/' + data.id]" nz-tooltip [nzTooltipTitle]="'monitors.detail' | i18n">
            <i nz-icon nzType="area-chart" nzTheme="outline"></i>
          </button>
          <button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
            <span nz-icon nzType="ellipsis"></span>
          </button>
          <nz-dropdown-menu #more_menu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="primary"
                  (click)="onEditOneMonitor(data.id)"
                  nz-tooltip
                  [nzTooltipTitle]="'monitors.edit-monitor' | i18n"
                >
                  <i nz-icon nzType="edit" nzTheme="outline"></i>
                </button>
              </li>
              <li nz-menu-item>
                <button
                  *ngIf="data.status == 0"
                  nz-button
                  nzType="primary"
                  (click)="onEnableManageOneMonitor(data.id)"
                  nz-tooltip
                  [nzTooltipTitle]="'monitors.enable' | i18n"
                >
                  <i nz-icon nzType="play-circle" nzTheme="outline"></i>
                </button>
              </li>
              <li nz-menu-item>
                <button
                  *ngIf="data.status != 0"
                  nz-button
                  nzDanger
                  nzType="primary"
                  (click)="onCancelManageOneMonitor(data.id)"
                  nz-tooltip
                  [nzTooltipTitle]="'monitors.cancel' | i18n"
                >
                  <i nz-icon nzType="pause-circle" nzTheme="outline"></i>
                </button>
              </li>
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="primary"
                  nzDanger
                  (click)="onDeleteOneMonitor(data.id)"
                  nz-tooltip
                  [nzTooltipTitle]="'monitors.delete-monitor' | i18n"
                >
                  <i nz-icon nzType="delete" nzTheme="outline"></i>
                </button>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

<nz-modal
  [(nzVisible)]="isSwitchExportTypeModalVisible"
  [nzTitle]="'monitors.export.switch-type' | i18n"
  nzOkDisabled="true"
  [nzFooter]="switchExportTypeModalFooter"
>
  <ng-container *nzModalContent>
    <!--    <p style="text-align: center">-->
    <!--      <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('YAML')" [nzLoading]="exportYamlButtonLoading">-->
    <!--        <span nz-icon nzType="download"></span>-->
    <!--        {{ 'monitors.export.use-type' | i18n : { type: 'YAML' } }}-->
    <!--      </button>-->
    <!--    </p>-->
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('JSON')" [nzLoading]="exportJsonButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'JSON' } }}
      </button>
    </p>
    <p style="text-align: center">
      <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('EXCEL')" [nzLoading]="exportExcelButtonLoading">
        <span nz-icon nzType="download"></span>
        {{ 'monitors.export.use-type' | i18n : { type: 'EXCEL' } }}
      </button>
    </p>
  </ng-container>
</nz-modal>

<!-- filter app type modal -->
<nz-modal
  [(nzVisible)]="appSwitchModalVisible"
  (nzOnCancel)="onAppSwitchModalCancel()"
  nzClosable="false"
  nzWidth="30%"
  nzWrapClassName="monitor-select-menu-modal"
  [nzFooter]="null"
  [nzOkLoading]="appSearchLoading"
>
  <div *nzModalContent class="-inner-content">
    <app-monitor-select-menu
      listStyle="border-right: 0px"
      [searchPlaceholder]="(appSwitchModalVisibleType === 1 ? 'monitors.search.app' : 'monitors.center.search.placeholder') | i18n"
      [loading]="appSearchLoading"
      [data]="appSearchOrigin"
      (selectedChanged)="gotoMonitorAddDetail($event)"
    >
      <ng-template let-app="item" #prefix>
        <i nz-icon [nzType]="getAppIconName(app.value)" nzTheme="outline"></i>
      </ng-template>
      <ng-template #suffix>@if (appSwitchModalVisibleType !== 1) {<i nz-icon nzType="right"></i>}</ng-template>
    </app-monitor-select-menu>
  </div>
</nz-modal>
